<template>
    <div class="menuItemContainer">
        <div class="avatar">
            <el-badge :value="unRead" :show-zero="false">
                <img :src="menuItem.avatar" />
            </el-badge>
        </div>
        <div class="text">
            <span class="name">{{ menuItem.title }}</span>
            <span class="message">
                {{ getNewestMessage(menuItem.conversationId, menuItem.title, menuItem.userId) }}
            </span>
        </div>
        <span class="time">
            {{ showTime }}
        </span>
    </div>
</template>

<script setup lang="ts">
import { PropType, ref } from 'vue'
import useMessagesStore from '@/store/modules/messages'
import useUserStore from '@/store/modules/user'
import { ChatMenuItemMeta } from '@/store/modules/types/type'
import { conversation, messages } from '@/api/messages/type'
import dayjs from 'dayjs'
import { friendTime } from '@/utils/time.ts'

defineProps({
    menuItem: {
        type: Object as PropType<ChatMenuItemMeta>,
        required: true,
    },
})
//使用仓库数据
const messagesStore = useMessagesStore()
const userStore = useUserStore()
const showTime = ref<string>('')
const unRead = ref<number>(0)

//根据好友id获取最新的聊天信息
const getNewestMessage = (conversationId: number, title: string, userId: number) => {
    if (conversationId === -1 || messagesStore.conversations.length === 0) {
        return ''
    }
    let message: string
    let sender: string
    let showMessage: string
    let conversation: conversation | undefined = messagesStore.conversations.find(
        (item: conversation) => {
            return item.conversation_id === conversationId
        },
    )
    if (conversation) {
        // 未读信息数量
        if (conversation.users[0] === userId) {
            unRead.value = conversation.unRead2
        } else {
            unRead.value = conversation.unRead1
        }
    }
    if (conversation && conversation.messages.length !== 0) {
        let newestMessage: messages = conversation.messages.at(-1)!
        message = newestMessage.message_content
        const messageTime = dayjs(newestMessage.send_time)
        showTime.value = friendTime(messageTime)
        if (newestMessage.sender_id === userStore.userId) {
            sender = userStore.realname
        } else {
            sender = title
        }
        showMessage = sender + ': ' + message
    } else {
        showTime.value = ''
        showMessage = ''
    }
    return showMessage
}
</script>

<style scoped lang="scss">
.menuItemContainer {
    width: 100%;
    height: 100%;
    @include flex-layout();

    .avatar {
        width: auto;
        height: 100%;
        @include flex-layout(flex, center, center);

        img {
            width: 3.125rem;
            height: 3.125rem;
            border-radius: 0.5rem;
        }
    }

    .text {
        flex: 1;
        margin-left: 25px;
        overflow: hidden;
        @include flex-layout(flex, normal, space-around, nowrap, column);

        .name {
            line-height: 2.4rem;
            font-size: 1.2rem;
        }

        .message {
            font-size: 0.9rem;
            line-height: 1.2rem;
            color: rgb(153, 153, 153);
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .time {
        width: 6rem;
        height: 100%;
        font-size: 0.8rem;
        color: black;
        @include flex-layout(flex, center, end);
    }
}
</style>
